<% include header %>
<script src="libs/jquery.validate.js"></script>
<div class="regist col-sm-8 col-sm-offset-2">
    <div class="panel-title">
        <h2 class="text-center text-info form-group"><%= title %></h2>
    </div>
    <%if(success){%>
    <div class="text-center"><%= success%></div>
    <% }%>
    <%if(error){%>
    <div class="text-center"><%= error%></div>
    <% }%>
    <form class="form-horizontal col-sm-offset-2" role="form" method="post" action="/regist" id="form">
        <fieldset>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-2">
                    <input type="email" class="form-control" name="email" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-2">
                    <input type="text" class="form-control" name="username" placeholder="请输入汉字作为用户名" >
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-2">
                    <input type="password" class="form-control" name="password" placeholder="请输长度不少于6位数的密码"   id="password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-2">
                    <input type="password" class="form-control" name="repassword" placeholder="请再次输入密码"   >
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-6 col-sm-offset-2">
                    <input type="submit"  class="form-control submit" value="注册" name="submit">
                </div>
            </div>
        </fieldset>
    </form>
    <div class="go text-center">
        <div style="color: dimgrey">已经有账号了？</div>
        <div><a href="/">前往登录</a></div>
    </div>
</div>
<% include footer %>
<script>
//    页面设置动画让整个div从左侧方划入
    $('.regist').animate({left:'-220px'},1000);
    $("#form").validate({
        rules:{
            email:{
                required: true,
                minlength: 2,
            },
            username:{
                required: true,
                minlength: 1,
                maxlength: 10,
                unameMethod:true,

            },
            password:{
                required: true,
                minlength: 6,
                maxlength: 16,
                passwordMethod:true,

            },
            repassword:{
                required: true,
                equalTo: "#password",
            },
            message:{
                email:{
                    required:"邮箱不能为空",
                    email:"邮箱地址不正确",
                },
                username:{
                    required:"用户名不能为空",
                    email:"用户名不正确",
                },
            }

        }
    });
    // 给账户名添加正则判断的规则
    $.validator.addMethod(
            "unameMethod",
            function(value, element){
//                基础语法 "^([]{})([]{})([]{})$"
//                /[\u4e00-\u9fa5]{2,}/   汉字最少出现两次
                return  this.optional(element) || /[\u4e00-\u9fa5]/.test(value);
            },"账号格式不正确"
    );
    //给密码添加正则
    $.validator.addMethod(
            "passwordMethod",
            function(value, element){
                return  this.optional(element) || /[\d]{5,15}/.test(value);
            },"密码格式不正确"
    );

</script>